<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.webjars.org/tags" prefix="wj"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="<%=basePath %>/webjars/image-cut/1.0-RELEASE/css/imageCut.css">
    <link rel="stylesheet" href="<%=basePath %>/webjars/image-cut/1.0-RELEASE/js/jquery-ui/jquery-ui.css">
    <script src="<%=basePath %>/webjars/jquery/3.2.1/dist/jquery.js"></script>
    <script src="<%=basePath %>/webjars/image-cut/1.0-RELEASE/js/jquery-ui/jquery-ui-1.10.4.js"></script>
    <script src="<%=basePath %>/webjars/image-cut/1.0-RELEASE/js/imageCut.js"></script>
</head>
<body>
<div id="box">
    <img id="img1" src="<%=basePath %>/webjars/image-cut/1.0-RELEASE/image/6597851519423469981.jpg" height="450" width="675"/>
    <img id="img2" src="<%=basePath %>/webjars/image-cut/1.0-RELEASE/image/6597851519423469981.jpg" height="450" width="675"/>
    <div id="main">
        <div id="left-up" class="minDiv left-up"></div>
        <div id="up" class="minDiv up"></div>
        <div id="right-up" class="minDiv right-up"></div>
        <div id="right" class="minDiv right"></div>
        <div id="right-down" class="minDiv right-down"></div>
        <div id="down" class="minDiv down"></div>
        <div id="left-down" class="minDiv left-down"></div>
        <div id="left" class="minDiv left"></div>
        <div class="rect-x dash"></div>
        <div class="rect-y dash"></div>
    </div>
</div>
<div id="preview">
    <img id="img3" src="<%=basePath %>/webjars/image-cut/1.0-RELEASE/image/6597851519423469981.jpg" height="450" width="675"/>
</div>
<div class="data-area">
    <table class="table table-bg table-border table-bordered table-striped">
        <tr>
            <td>
                <div class="data-input-div">
                    <label for="data-x">X</label>
                    <input id="data-x">
                    <span>px</span>
                </div>
            </td>
            <td>
                <div class="data-input-div">
                    <label>Y</label>
                    <input id="data-y">
                    <span>px</span>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="data-input-div">
                    <label>Width</label>
                    <input id="data-width">
                    <span>px</span>
                </div>
            </td>
            <td>
                <div class="data-input-div">
                    <label>Height</label>
                    <input id="data-height">
                    <span>px</span>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>